import React, { Component, useState } from 'react';
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from '../../../config';
import { Divider, DatePicker, Input } from 'antd';
import './loglake.less'
import { getOfflineLight, getMessageInfo } from '../../../api/index';
import { formatDateSlashes } from "../../../utils/dataUtils";
import { getdataById, } from "../../../utils/socialize1";
const { RangePicker } = DatePicker;
export default class loglake extends Component {
  constructor(a) {
    super(a);
    this.state = {
      currentItems: [],//当前页码的数据
      currentPage: 1,//当前的页码
      totalPages: 0,//所有的页码总数
      itemsPerPage: 15,//每页展示多少数据
      like: [],
      reply: [],
      movetime: ''
    }
  }
  componentWillUnmount() {

  }
  async componentDidMount() {

    //获取数据
    let line = ''
    let page = 1
    let items = 15
    let result = await getMessageInfo(page, items)
    meshLog('messageInfo', result);
    let itemsdata = result.msg.messageInfo
    meshLog('messageInfo', itemsdata);
    // 计算总页数
    let itemsPerPage = this.state.itemsPerPage
    meshLog('每页的个数', itemsPerPage);
    const totalPages = Math.ceil(result.msg.count / itemsPerPage);
    meshLog('总的页数', totalPages);
    let currentPage = page //默认显示第一个页码的数据
    const currentItems = itemsdata;
    this.setState({
      currentPage: currentPage,
      totalPages: totalPages,
      itemsdata: itemsdata,
      currentItems: currentItems,
      like: result.msg.like,
      reply: result.msg.reply
    })


    //this.goToPage(currentPage);
  }
  goToPage = async (page) => {
    meshLog('当前展示的page', page);
    let line = ''
    let items = 15
    let result = await getMessageInfo(page, items)
    let itemsdata = result.msg.messageInfo

    // 计算总页数
    let itemsPerPage = this.state.itemsPerPage
    meshLog('itemsPerPage', itemsPerPage);
    const totalPages = Math.ceil(result.msg.count / itemsPerPage);
    meshLog('totalPages', itemsdata);
    let currentPage = page //默认显示第一个页码的数据
    const currentItems = itemsdata;
    this.setState({
      currentPage: currentPage,
      totalPages: totalPages,
      itemsdata: itemsdata,
      currentItems: currentItems,
      like: result.msg.like,
      reply: result.msg.reply
    })

  };

  // 首页
  gotoFirstPage = () => {
    if (this.state.currentPage <= 1) {
      return
    } else {
      let currentPage = 1
      this.setState({
        currentPage: 1,
      })
      this.goToPage(1);
    }

  };
  // 上一页
  goToPreviousPage = () => {
    if (this.state.currentPage <= 1) {
      return
    } else {
      let currentPage = this.state.currentPage
      this.setState({
        currentPage: currentPage - 1,
      })
      this.goToPage(currentPage - 1);
    }

  };
  // 下一页
  goToNextPage = () => {
    if (this.state.currentPage >= this.state.totalPages) {
      return
    } else {
      let currentPage = this.state.currentPage
      this.setState({
        currentPage: currentPage + 1,
      })
      this.goToPage(currentPage + 1);
    }
  };

  // 末页
  goToEndPage = () => {
    if (this.state.currentPage >= this.state.totalPages) {
      return
    } else {
      let currentPage = this.state.totalPages
      this.setState({
        currentPage: currentPage,
      })
      this.goToPage(currentPage);
    }
  };
  // 选择页确定
  changeTOPage = () => {
    var inputElement = document.getElementById('inputid');
    let inputValue = inputElement.value;
    let currentPage = 0
    meshLog('inputValue', inputValue);
    if (inputValue >= this.state.totalPages) {
      inputElement.value = this.state.totalPages
      currentPage = this.state.totalPages
    } else {
      currentPage = parseInt(inputValue)//强制转换成数字类型
    }
    this.setState({
      currentPage: currentPage,
    })
    this.goToPage(currentPage);
  };
  //查询按钮
  handleFruitChange = async () => {
    var selectBox = document.getElementById("fruit1");
    var selectBox2 = document.getElementById("fruit2");
    // meshLog('selectBox2', selectBox2.value);
    // meshLog('selectBox', selectBox.value);
    let time = selectBox2.value
    let area = selectBox.value
    let result = await getOfflineLight(time, area)
    meshLog('resultresult', result);
    if (result.code == 0) {
      meshLog('resultresult1', result.msg.url);
      const fileUrl = result.msg.url; // 文件的实际路径
      //window.downl(fileUrl);
      //直接下载的方式
      let url = fileUrl
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", "offline_mac");
      document.body.appendChild(link);
      link.click();
    } else {
      alert("请输入正确的参数")
    }

  };
  onChange = (info) => {
    console.log('RangePicker:', info);
    this.setState({
      movetime: info,
    })
  };
  render() {
    return (
      <div className="loglake" >
        <div className="loglakedaohang">
          <span className='loglakedaohangzuo' >位置： 日志管理 》详细灯信息</span>
        </div>
        <div className="loglakeneirong">
          <div className="loglakeneirong1" >
            <div className="loglakequery" >
              <div className="loglakequerytitle" >条件查询</div>
              <Divider />
              <div className="loglakequerydate" >

                <label className="loglakefruit1" for="fruit1">电箱号</label>
                <input id="fruit1" style={{ width: 150 }} />

                <label className="loglakefruit2" for="fruit2">选择时间</label>

                <DatePicker id='fruit2' placeholder={['选择时间']} onChange={(_d, info) => { this.onChange(info) }} />

                <button className="handleFruit" onClick={() => { this.handleFruitChange() }}>
                  查询
                </button>

              </div>

            </div>
            {/* <div className="loglakemessage"  >
              <div className="loglakemessagetitle" >灯信息列表</div>
              <div className="loglakemessagedate" >
                <div className="loglaketitledate">
                  <div className="span1">序号</div>
                  <div className="span1">作者</div>
                  <div className="span11">发布内容</div>
                  <div className="span1">回复个数</div>
                  <div className="span1">点赞个数</div>
                  <div className="span1">发布时间</div>
                  <div className="span1">是否置顶</div>

                </div>
                {
                  this.state.currentItems && this.state.currentItems.map((element, key) => {
                    if (!element.children) {
                      return (
                        <div className="loglakedatashuju" style={{ backgroundColor: key % 2 == 0 ? '' : '#F1F5FB' }} key={key}>
                          <div className="span2" >{key + 1}</div>
                          <div className="span2" >{element.nickname}</div>
                          <div className="span22">{element.info.slice(0, 15)}</div>
                          <div className="span2">{getdataById(element.id, this.state.reply).length}</div>
                          <div className="span2">{getdataById(element.id, this.state.like).length}</div>
                          <div className="span2">{formatDateSlashes(element.time)}{ }</div>
                          <div className="span2">{element.state == 2 ? "是" : '否'}</div>
                        </div>
                      )
                    }
                    else {
                      return (
                        <span>{element}</span>
                      )
                    }
                  })
                }
              </div>
              <div className='zongyeshu'>
                <span style={{ marginLeft: 40 }}>共{this.state.totalPages}页</span>
                <label className="PerPage" for="PerPage">每页显示</label>
                <select id="PerPage" style={{ color: "#000000" }} name="PerPage">
                  <option value="10">15</option>
                  <option value="8">10</option>
                  <option value="5">5</option>
                </select>个
              </div>
              <div className='current'>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.gotoFirstPage() }}>
                  首页
                </button>
                <button disabled={this.state.currentPage === 1} onClick={() => { this.goToPreviousPage() }}>
                  上一页
                </button>
                {Array.from({ length: this.state.totalPages }, (_, i) => (
                  <button
                    key={i}
                    onClick={() => { this.goToPage(i + 1) }}
                    style={{ margin: '2px' }}
                    disabled={this.state.currentPage === i + 1}
                  >
                    {i + 1}
                  </button>
                ))}
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToNextPage() }}>
                  下一页
                </button>
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.goToEndPage() }}>
                  末页
                </button>
                <span>&nbsp;&nbsp;共{this.state.totalPages}页&nbsp;&nbsp;</span>
                到 <input id='inputid' style={{ width: 30 }} type='number' min={1} ></input>页&nbsp;&nbsp;
                <button disabled={this.state.currentPage === this.state.totalPages} onClick={() => { this.changeTOPage() }}>
                  确定
                </button>
              </div>
            </div> */}
          </div>

        </div>
      </div >
    )
  }
}
